<section class="content-header">
    <h1>
        设备故障代码分析
        <!-- <small>Control panel</small> -->
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-default btn-sm" (click)="exportData()">
                数据导出
            </button>
        </div>
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-3 col-md-push-9">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">查询区域</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="form-group">
                        <label for="DateTimeRange">时间</label>
                        <input type="text" class="form-control pull-right" id="DateTimeRange" placeholder="请选择日期" />
                    </div>
                    <div class="form-group">
                        <label>区域</label>
                        <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems" displayExpr="subArea"
                            [(selectedItem)]="subAareSelected" (onValueChanged)="onSubAreaSelectedChange($event,1)" [value]="subAareSelected"
                            [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                    <div class="form-group">
                        <label>设备</label>
                        <dx-drop-down-box #dddb style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="equipmentSelected"
                            displayExpr="equipment" placeholder="请选择工位" [showClearButton]="true" [dataSource]="equipemntItems">
                            <dxo-drop-down-options [width]="510" [height]="340"></dxo-drop-down-options>
                            <div *dxTemplate="let data of 'content'">
                                <button type="button" (click)="clearEquipmentSelected()" class="btn btn-default btn-sm" title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                                <button type="button" (click)="equipmentSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                                <dx-data-grid [dataSource]="equipemntItems" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }" [filterRow]="{ visible: true }"
                                    [(selectedRowKeys)]="equipmentSelected" [scrolling]="{ mode: 'infinite' }" [height]="265"
                                    [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                                    <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                                    <dxi-column dataField="equipmentType" caption="设备类型" [width]="100">
                                    </dxi-column>
                                    <dxi-column dataField="supplier" caption="供应商" [width]="100">
                                    </dxi-column>
                                    <dxi-column dataField="stationCode" caption="工位" [width]="100">
                                    </dxi-column>
                                    <dxi-column dataField="equipment" caption="设备" [width]="100">
                                    </dxi-column>
                                </dx-data-grid>
                            </div>
                        </dx-drop-down-box>
                    </div>
                    <div class="form-group">
                        <label>班次</label>
                        <dx-select-box #shift style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="shiftItems" displayExpr="shiftName"
                            [(selectedItem)]="shiftSelected" [(value)]="shiftSelected" [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                    <div class="form-group">
                        <label>过滤值</label>
                        <dx-number-box format="#0 分钟" [min]="0" [max]="100" style="width:100%;height:35px;margin-bottom:5px;border-radius: 0px" [(value)]="filterValue"
                            [step]="1"></dx-number-box>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-md-pull-3">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">故障时间分布</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="row">
                    <!-- <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs pull-right">
                            <li class="active">
                                <a href="#pie" data-toggle="tab">饼图</a>
                            </li>
                            <li>
                                <a href="#column" data-toggle="tab">柱状图</a>
                            </li>
                        </ul>
                        <div class="tab-content no-padding"> -->
                    <div class="col-md-12 chart tab-pane active" id="pie" style="position: relative; height: 300px;">
                        <div echarts [options]="timeChartOption" [loading]="showloading" (chartInit)="onChartInit('故障时间分布',$event)" class="demo-chart"
                            style="height:300px;"></div>
                    </div>
                    <!-- <div class="col-md-6 chart tab-pane" id="column" style="position: relative; height: 350px;">
                        <div echarts [options]="timeChartOptionBar" [loading]="showloading" (chartInit)="onChartInit(2,$event)" class="demo-chart"
                            style="height:300px;"></div>
                    </div> -->
                    <!-- </div>
                    </div> -->
                </div>
            </div>
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">故障次数分布</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div echarts [options]="countChartOption" [loading]="showloading" (chartInit)="onChartInit('故障次数分布',$event)" class="demo-chart"
                        style="height:300px;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">设备故障详情报表</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid [dataSource]="mfaList" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" 
                    [rowAlternationEnabled]="true" (onExporting)="onExporting($event)" [columnMinWidth]="50" [columnAutoWidth]="true">
                        <dxo-paging [pageSize]="10"></dxo-paging>
                        <dxo-export [enabled]="true" fileName="设备故障详情报表" [allowExportSelectedData]="false"></dxo-export>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxi-column dataField="subArea" caption="生产线">
                        </dxi-column>
                        <dxi-column dataField="station" caption="工位/设备">
                        </dxi-column>
                        <dxi-column dataField="startTime" caption="开始时间">
                            
                        </dxi-column>
                        <dxi-column dataField="endTime" caption="结束时间">
                        </dxi-column>
                        <dxi-column dataField="tfaultTime" caption="故障时间(分)">
                        </dxi-column>
                        <dxi-column dataField="tfaultCount" caption="故障次数">
                        </dxi-column>
                        <dxi-column dataField="tfaultCountRate" caption="故障次数占比(%)">
                        </dxi-column>
                        <dxi-column dataField="tfaultTimeRate" caption="故障时间占比(%)">
                        </dxi-column>
                        <dxi-column dataField="deviceAlarmNo" caption="故障代码">
                        </dxi-column>
                        <dxi-column dataField="faultWordDescription" caption="故障描述">
                        </dxi-column>
                    </dx-data-grid>
                </div>
            </div>

            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">按时间Top10</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid [dataSource]="timeTopItems" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" 
                    [rowAlternationEnabled]="true" [columnMinWidth]="50" [columnAutoWidth]="true">
                        <dxi-column dataField="deviceAlarmNo" caption="故障代码">
                        </dxi-column>
                        <dxi-column dataField="tfaultTime" caption="故障时间">
                        </dxi-column>
                        <dxi-column dataField="tfaultTimeRate" caption="占比(%)">
                        </dxi-column>
                        <dxi-column dataField="faultWordDescription" caption="故障描述">
                        </dxi-column>
                        <dxi-column dataField="yyfx" caption="原因分析">
                        </dxi-column>
                        <dxi-column dataField="cs" caption="措施">
                        </dxi-column>
                        <dxi-column dataField="zt" caption="状态">
                        </dxi-column>
                    </dx-data-grid>

                </div>
            </div>

            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">按次数Top10</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid [dataSource]="countTopItems" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" 
                    [rowAlternationEnabled]="true" [columnMinWidth]="50" [columnAutoWidth]="true">
                        <dxi-column dataField="deviceAlarmNo" caption="故障代码">
                        </dxi-column>
                        <dxi-column dataField="tfaultCount" caption="故障次数">
                        </dxi-column>
                        <dxi-column dataField="tfaultCountRate" caption="占比(%)">
                        </dxi-column>
                        <dxi-column dataField="faultWordDescription" caption="故障描述">
                        </dxi-column>
                        <dxi-column dataField="yyfx" caption="原因分析">
                        </dxi-column>
                        <dxi-column dataField="cs" caption="措施">
                        </dxi-column>
                        <dxi-column dataField="zt" caption="状态">
                        </dxi-column>
                    </dx-data-grid>

                </div>
            </div>
        </div>
    </div>
    <!-- end row -->
</section>